<template>
  <div class="search-container">
    <!-- Logo 部分 - 增大尺寸 -->
    <img src="@/assets/tmalllogo.png" class="logo" alt="天猫logo">

    <!-- 搜索区域 -->
    <div class="search-box">
      <!-- 分类下拉菜单 -->
      <el-dropdown trigger="click" class="category-dropdown">
        <span class="dropdown-trigger">
          {{ selectedCategory }}<el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in categories"
              :key="item.value"
              @click="selectedCategory = item.label; categoryId = item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 搜索输入框 -->
      <el-input
        v-model="searchKeyword"
        class="search-input"
        placeholder="搜索天猫商品"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
      </el-input>

      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        class="search-btn"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>
  </div>

  <div class="screen-outer">
    <div class="category" @mouseleave="hideSubCategories">
      <div class="category-top">分类</div>
      <div class="category-list">
        <div v-for="item in categoryList" 
             :key="item.id" 
             class="category-item"
             @mouseenter="showSubCategories(item)"
             :class="{ 'active': currentCategory && currentCategory.id === item.id }">
          {{ item.name }}
        </div>
      </div>
      <!-- 右侧类别框 -->
      <div class="sub-categories-panel" 
           v-if="currentCategory">
        <div class="sub-categories-content">
          <div class="sub-category-section">
            <div class="sub-category-title">{{ currentCategory.name }}</div>
            <div class="sub-category-items">
              <span v-for="item in subCategoryList" 
                    :key="item.id"
                    class="sub-category-item"
                    @click="handleCategoryClick(item)">
                {{ item.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-inner">
      <div class="core-left">
        <!-- 导航容器 -->
        <div class="nav-container">
          <!-- 上侧侧导航项 -->
          <div class="left-nav">
            <el-link href="https://www.taobao.com/?spm=a21bo.tmall/a.201859.1.6614
            c3d5Bv7WW6" class="nav-item" style="color: #ff0036">淘宝首页</el-link>
            <span class="divider">|</span>
            <el-link href="https://www.taobao.com/?spm=a21bo.tmall/a.201859.1.6614
            c3d5Bv7WW6" class="nav-item" style="color: #33c900">天猫超市</el-link>
            <span class="divider">|</span>
            <el-link href="https://www.tmall.hk/?spm=a21bo.tmall/a.201859.3.6614c3
            d5Bv7WW6" class="nav-item" style="color: #a04ed2">天猫国际</el-link>
            <span class="divider">|</span>
            <el-link href="https://huodong.taobao.com/wow/a/act/tao/dailygroup/235
            09/24308/wupr?spm=a21bo.tmall/a.201859.4.6614c3d5Bv7WW6&wh_pid=daily-55
            1925&disableNav=YES&status_bar_transparent=true" class="nav-item" style="color:#ff0036;">聚划算</el-link>
            <span class="divider">|</span>
            <el-link href="https://tbzb.taobao.com/?spm=a21bo.tmall/a.201859.5.66
            14c3d5Bv7WW6" class="nav-item">直播频道</el-link>
            <span class="divider">|</span>
            <el-link href="https://pages-fast.m.taobao.com/wow/z/blackvip/v/pc-su
            per?spm=a21bo.tmall/a.201859.6.6614c3d5Bv7WW6&x-render-mode=csr&cardT
            ype=CO_BRANDED_CARD&from=pc_icon" class="nav-item" style="color: #a04b0e">88VIP</el-link>
            <span class="divider">|</span>
            <el-link href="https://s.taobao.com/search?spm=a21bo.tmall/a.201859.
            7.6614c3d5Bv7WW6&fromTmallRedirect=true&localImgKey=&page=1&q=%E5%96%
            5%E9%B2%9C%E7%94%9F&tab=mall" class="nav-item">喵鲜生</el-link>
            <span class="divider">|</span>
            <el-link href="https://www.fliggy.com/?spm=a21bo.tmall/a.201859.8.661
            4c3d5Bv7WW6" class="nav-item">飞猪旅行</el-link>
          </div>
        </div>

        <div class="content-area">
          <div class="carousel-container" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
            <!-- 轮播内容 -->
            <div class="carousel-track" :style="trackStyle">
              <div
                v-for="(slide, index) in slideshow"
                :key="slide.id"
                class="carousel-item"
              >
                <img
                  :src="slide.mainImg"
                  :alt="slide.title"
                  class="carousel-image"
                  @click="handleSlideClick(slide.link)"
                >
              </div>
            </div>

            <!-- 左右导航箭头 -->
            <div class="arrow prev" @click="prevSlide">
              <el-icon :size="30"><ArrowLeft /></el-icon>
            </div>
            <div class="arrow next" @click="nextSlide">
              <el-icon :size="30"><ArrowRight /></el-icon>
            </div>

            <!-- 指示器 -->
            <div class="indicators">
              <div
                v-for="(slide, index) in slideshow"
                :key="slide.id"
                class="indicator"
                :class="{ active: currentIndex === index }"
                @click="goToSlide(index)"
              ></div>
            </div>
          </div>

          <!-- 广告位商品 -->
          <div class="carousel-right">
            <div v-for="(ad, index) in advertisingList" 
                 :key="ad.id" 
                 class="recommendation"
                 @click="handleAdClick(ad.link)">
              <img :src="ad.mainImg" :alt="ad.title" class="ad-image">
              <div class="ad-title">{{ ad.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="core-right" v-if="!isLoggedIn">
      <!-- 右侧内容 -->
      <div class="core-right-top">
        <div class="core-right-top-top">
          <img src="@/assets/Avatar.jpg">
          <h3>你好</h3>
          <router-link to="/register" class="register-link">注册</router-link>
        </div>
        <div class="text1">理想生活上天猫</div>
        <div class="text2">嘿！更懂你的推荐，更便捷的搜索</div>
        <router-link to="/login">
          <el-button class="loginbt">立即登录</el-button>
        </router-link>
      </div>
    </div>

    <div class="core-right-afterlogin" v-else>
      <!-- 右侧内容 -->
      <div class="core-right-top-afterlogin">
        <div class="core-right-top-top-afterlogin">
          <img src="@/assets/Avatar.jpg">
          <h3>{{ userInfo.username || '你好' }}</h3>
          <el-button class="logout-btn" @click="handleLogout">退出登录</el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Display Section -->
  <div class="product-section">
    <div class="product-container">
      <div class="product-grid">
        <div v-for="product in products" :key="product.id" class="product-card" @click="goToProductDetails(product.id)">
          <div class="product-image">
            <img :src="product.mainImg" :alt="product.name">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <div class="product-price">¥{{ product.price }}</div>
            <div class="product-sales">月销{{ product.saleCount }}笔</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, toRaw, onMounted, onUnmounted, computed } from "vue";
import request from "@/utils/http.js";
import Product from "@/components/Product.vue";
import router from "@/router/index.js";
import tools from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { Search, ArrowDown, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';

const slideshow = ref([]);
const currentIndex = ref(0);
const autoPlayTimer = ref(null);

// 获取轮播图数据
function getSlideshowList() {
  request.get("/api/slideshow/list").then(res => {
    if (res.code === 1) {
      slideshow.value = res.data;
      startAutoPlay();
    }
  });
}

// 自动播放
function startAutoPlay() {
  if (autoPlayTimer.value) {
    clearInterval(autoPlayTimer.value);
  }
  autoPlayTimer.value = setInterval(() => {
    nextSlide();
  }, 3000);
}

// 暂停自动播放
function pauseAutoPlay() {
  if (autoPlayTimer.value) {
    clearInterval(autoPlayTimer.value);
  }
}

// 恢复自动播放
function resumeAutoPlay() {
  startAutoPlay();
}

// 上一张
function prevSlide() {
  currentIndex.value = (currentIndex.value - 1 + slideshow.value.length) % slideshow.value.length;
}

// 下一张
function nextSlide() {
  currentIndex.value = (currentIndex.value + 1) % slideshow.value.length;
}

// 跳转到指定幻灯片
function goToSlide(index) {
  currentIndex.value = index;
}

// 计算轮播图位置
const trackStyle = computed(() => ({
  transform: `translateX(-${currentIndex.value * 100}%)`
}));

// 处理幻灯片点击
function handleSlideClick(link) {
  if (link) {
    window.open(link, '_blank');
  }
}
//获得销量排行(废弃)
// const productSalesVolumeTop = ref([])
// getProductSalesVolumeTopList()
//
// function getProductSalesVolumeTopList() {
//   request.get("/api/product/salesVolumeTop/12").then(res => {
//     productSalesVolumeTop.value = res.data
//   })
// }

const searchName = ref('')

function search() {
  if (searchName.value.trim()) {
    router.push({
      path: '/productList',
      query: { name: searchName.value }
    });
  }
}

const topAdvertising = ref({})
const leftAdvertising = ref({})
const rightAdvertising = ref({})

const advertisingList = ref([]);

// 获取广告列表
function getAdvertisingList() {
  request.get("/api/advertising/list").then(res => {
    if (res.code === 1) {
      // 确保只显示6个广告位
      advertisingList.value = res.data.slice(0, 6);
    }
  });
}

function openLink(link) {
  window.location.href = link
}

//获取推荐列表(废弃)
// const productRecommend = ref([])
// getProductRecommendList()
//
// function getProductRecommendList() {
//   request.get("/api/product/recommend/3").then(res => {
//     productRecommend.value = res.data
//   })
// }

// 分类数据
const categories = ref([
  { label: '全部', value: '' },
  { label: '女装', value: '1' },
  { label: '男装', value: '2' },
  { label: '手机', value: '3' },
  { label: '家电', value: '4' },
  { label: '美妆', value: '5' },
]);

const selectedCategory = ref('全部');
const categoryId = ref('');
const searchKeyword = ref('');

const handleSearch = () => {
  try {
    console.log('Search button clicked');
    
    if (searchKeyword.value.trim()) {
      // 构建查询参数
      const queryParams = {
        name: searchKeyword.value
      };
      
      // 如果选择了分类，添加分类参数
      if (categoryId.value) {
        queryParams.productTypeId = categoryId.value;
      }
      
      console.log('Redirecting to ProductList with params:', queryParams);
      
      // // 构建搜索URL
      // const searchUrl = `/productList?name=${encodeURIComponent(searchKeyword.value)}${categoryId.value ? `&productTypeId=${categoryId.value}` : ''}`;
      // console.log('Navigating to:', searchUrl);
      // 使用router.push方式导航，而不是直接修改window.location
      const searchUrl = `/productList`;
      
      // 检查用户是否登录
      if (checkAndRedirect(searchUrl)) {
        // window.location.href = searchUrl;
        router.push({
          path: '/productList',
          query: queryParams
        });
      }
    } else {
      ElMessage({
        message: '请输入搜索关键词',
        type: 'warning'
      });
    }
  } catch (error) {
    console.error('Search error:', error);
    ElMessage.error('搜索功能出错，请稍后重试');
  }
};

// 分类数据
const categoryList = ref([]);
const subCategoryList = ref([]);

// 获取大分类列表
function getMainCategoryList() {
  request.get("/api/MainProductType/list").then(res => {
    if (res.code === 1) {
      categoryList.value = res.data;
    } else {
      ElMessage.error("获取大分类列表失败");
    }
  }).catch(error => {
    ElMessage.error("获取大分类列表失败: " + error.message);
  });
}

// 获取小分类列表
function getSubCategoryList(mid) {
  request.get(`/api/productType/${mid}`).then(res => {
    if (res.code === 1) {
      subCategoryList.value = res.data;
    } else {
      ElMessage.error("获取小分类列表失败");
    }
  }).catch(error => {
    ElMessage.error("获取小分类列表失败: " + error.message);
  });
}

// 分类点击事件
function handleCategoryClick(category) {
  const targetPath = `/productList?productTypeId=${category.id}`;
  if (checkAndRedirect(targetPath)) {
    router.push(targetPath);
  }
}

// 跳转到商品详情页
function goToProductDetails(productId) {
  const targetPath = `/productDetails/${productId}`;
  if (checkAndRedirect(targetPath)) {
    router.push(targetPath);
  }
}

// 显示子分类
function showSubCategories(category) {
  currentCategory.value = category;
  getSubCategoryList(category.id);
}

// 隐藏子分类
function hideSubCategories() {
  currentCategory.value = null;
  subCategoryList.value = [];
}

// 页面加载时获取分类数据
onMounted(() => {
  console.log('Index page mounted, router:', router);
  getSlideshowList();
  getMainCategoryList();
  getProductList();
  getAdvertisingList();
  const token = tools.getToken();
  if (token) {
    isLoggedIn.value = true;
    const userInfo = tools.parseToken();
    if (userInfo) {
      userInfo.value = {
        username: userInfo.name,
        id: userInfo.id
      };
    }
  }
});

const isLoggedIn = ref(false);
const userInfo = ref({});

// 退出登录
function handleLogout() {
  tools.removeToken();
  isLoggedIn.value = false;
  userInfo.value = {};
  
  // 显示退出成功消息
  ElMessage({
    message: '退出登录成功',
    type: 'success'
  });

  // 刷新当前页面
  window.location.reload();
}

// Product data
const products = ref([]);

// Get product list
function getProductList() {
  request.get("/api/product/list",{qwe:1}).then(res => {
    if (res.code === 1) {
      products.value = res.data;
      console.log(res.data)
      console.log(products.value)
    } else {
      ElMessage.error("获取商品列表失败");
    }
  }).catch(error => {
    ElMessage.error("获取商品列表失败: " + error.message);
  });
}

// 检查用户是否登录
function checkAndRedirect(targetPath, requiresAuth = true) {
  if (requiresAuth && !isLoggedIn.value) {
    ElMessage.warning('请先登录');
    router.push(`/login?redirect=${encodeURIComponent(targetPath)}`);
    return false;
  }
  return true;
}

// 处理广告点击
function handleAdClick(link) {
  if (link) {
    window.open(link, '_blank');
  }
}

onUnmounted(() => {
  if (autoPlayTimer.value) {
    clearInterval(autoPlayTimer.value);
  }
});

const currentCategory = ref(null);

</script>

<style scoped>
.screen-outer{
  width: 1540px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.slideshow-card .el-card {
  --el-card-padding: 0;
}

.custom-input {
  border: none; /* 去掉边框 */
  border-bottom: 2px solid orange; /* 设置底部边框颜色为橙色 */
  border-radius: 0; /* 去掉圆角 */
  box-shadow: none; /* 去掉阴影 */
}

.custom-input .el-input__inner {
  background-color: transparent; /* 设置背景为透明 */
  padding: 10px; /* 调整内边距 */
  color: #333; /* 设置字体颜色 */
}

.custom-input .el-input__inner:focus {
  outline: none; /* 去掉聚焦时的轮廓 */
  border-bottom: 2px solid orange; /* 聚焦时保持橙色边框 */
}

.search-container {
  display: flex;
  align-items: center;
  padding: 15px 0;
  background: #fff;
  max-width: 1500px;
  margin: 0 auto;
  height: 100px;
  padding-right: 200px;
}

.logo {
  width: 200px;
  height: 60px;
  margin-right: 20px;
  cursor: pointer;
  object-fit: contain;
}

.search-box {
  display: flex;
  flex: 1;
  height: 40px;
  border: 2px solid #ff5000;
  border-radius: 10px;
}

.category-dropdown {
  width: 120px;
  border-right: 1px solid #eee;
  background: #f5f5f5;
  cursor: pointer;
  border-radius:25% 0 0 25% ;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  color: #666;
}

.search-input {
  flex: 1;
  border: none;
  box-shadow: none;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
}

.search-icon {
  font-size: 18px;
  color: #999;
}

.search-btn {
  width: 100px;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: #ff5000;
  border-color: #ff5000;
  font-size: 16px;
}

.search-btn:hover {
  background: #ff6f28;
  border-color: #ff6f28;
}

.category{
  width: 240px;
  height: 400px;
  background-color: #ff0036;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
}

.category-top{
  padding: 8px 0 0 16px;
  height: 32px;
  color: white;
}

.main-inner{
  width: 1060px;
  height: 400px;
  flex-shrink: 0;
}

.core-left{
  width: 100%;
}

.nav-container {
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
  margin: 0 auto 16px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}

.left-nav, .right-nav {
  display: flex;
  align-items: center;

}

.nav-item {
  text-align: center;
  width: 125px;
  color: #666;
  padding: 0 10px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 16px;
  font-weight: 600;

  &:hover {
    color: #ff5000;
  }

  .el-icon {
    font-size: 12px;
    margin-left: 2px;
  }
}

.divider {
  color: #ddd;
  user-select: none;
}

/* 下拉菜单样式 */
:deep(.nav-dropdown) {
  width: 120px;
  margin-top: 5px;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);

  .el-dropdown-menu__item {
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;

    &:hover {
      background-color: #fff5f3;
      color: #ff5000;
    }
  }
}

.user-dropdown {
  min-width: 100px;
}

.content-area {
  display: flex;
  justify-content: space-between;
  height: 344px;
  gap: 16px;
}

.carousel-container {
  width: 240px;
  height: 344px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border-radius: 15px;
}

.carousel-track {
  float: left;
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}

.carousel-item {
  flex: 0 0 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* 导航箭头 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  color: white;
  z-index: 10; /* 确保箭头在最上层 */
}

.arrow:hover {
  background: rgba(0,0,0,0.6);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* 指示器 */
.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10; /* 确保指示器在最上层 */
}

.indicator {
  width: 20px;
  height: 3px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.indicator.active {
  background: #ff5000;
  width: 30px;
}

.carousel-right{
  width: 800px;
  height: 344px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  padding: 0px;
  flex-shrink: 0;
}

.recommendation{
  width: 100%;
  height: 164px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.recommendation:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ad-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 15px;
}

.ad-title {
  padding: 8px;
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.core-right{
  width: 240px;
  height: 400px;
  background-color: #f7f7f7;
  border-radius: 10px;
  flex-shrink: 0;
  padding: 12px;
}

.core-right-afterlogin{
  width: 240px;
  height: 400px;
  background-color: #f7f7f7;
  border-radius: 10px;
  flex-shrink: 0;
  padding: 12px;
}

.category-list {
  padding: 8px;
}

.category-item {
  padding: 6px 16px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
  font-size: 14px;
  line-height: 24px;
}

.category-item:hover,
.category-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.core-right-top{
  width: 216px;
  height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.core-right-top-top{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.core-right-top-top img{
  width: 50px;
  border-radius: 25px;
  margin: 5px;
}

.core-right-top-top h3{
  margin: 0;
  padding: 0;
  line-height: 50px;
}

.register-link {
  color: #ff0036;
  text-decoration: none;
  font-size: 13px;
  margin-left: 10px;
  line-height: 50px;
}

.register-link:hover {
  color: #ff4d6a;
}

.text1{
  width: 216px;
  height: 24px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.text2{
  width: 216px;
  height: 14px;
  font-size: 12px;
  text-align: center;
  color: #666;
  margin-bottom: 15px;
}

.loginbt{
  background-color: #ff0036;
  color: white;
  width: 208px;
  height: 48px;
  margin: 0 auto;
  border-radius: 24px;
  font-weight: 600;
  font-size: 16px;
  display: block;
  border: none;
  transition: all 0.3s ease;
}

.loginbt:hover {
  background-color: #ff4d6a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 54, 0.2);
}

.core-right-top-afterlogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.core-right-top-top-afterlogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.core-right-top-top-afterlogin img{
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin: 0px auto;
}

.core-right-top-top-afterlogin h3 {
  margin: 10px 0;
  text-align: center;
}

.logout-btn {
  margin-top: 10px;
  background-color: #ff0036;
  color: white;
  width: 120px;
  height: 36px;
  border-radius: 18px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background-color: #ff4d6a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 54, 0.2);
}

/* Product Display Styles */
.product-section {
  width: 1540px;
  margin: 20px auto;
  padding: 20px 0;
}

.product-container {
  width: 100%;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0 10px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: #ff0036;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.product-sales {
  color: #999;
  font-size: 12px;
}

/* 右侧类别框样式 */
.sub-categories-panel {
  position: absolute;
  left: 240px;
  top: 0;
  width: 400px;
  height: 400px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 10px 10px 0;
  z-index: 100;
  padding: 20px;
  box-sizing: border-box;
}

.sub-categories-content {
  height: 100%;
  overflow-y: auto;
}

.sub-category-section {
  margin-bottom: 20px;
}

.sub-category-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.sub-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sub-category-item {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s;
  background-color: #f5f5f5;
}

.sub-category-item:hover {
  color: #ff0036;
  background-color: #fff5f5;
  transform: translateY(-2px);
}

/* 自定义滚动条样式 */
.sub-categories-content::-webkit-scrollbar {
  width: 6px;
}

.sub-categories-content::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.sub-categories-content::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>
